<template>
	<div class="home-container">
		<ShopHeader :isInput="dataArr.isInput" 
			:iconArr="dataArr.iconArr" 
			:placeholder="dataArr.placeholder"
			:aimUrl="dataArr.aimUrl"
			:rightUrl="dataArr.rightUrl"
		/>
		<div class="service-img">
			<img class="imgmv" src="../assets/images/serviceimg/banner@3x.png" alt="">
		</div>
		<div class="pay ">
			<div class="main">
				<p>生活缴费</p>
				<div class="list">
					<ul>						
							<li class="list1" >
								<img src="../assets/images/serviceimg/shuifei@3x.png" alt="">
								<p>水费</p>
							</li>					
						<li>
							<router-link to="/add">
								<img src="../assets/images/serviceimg/dianfei@3x.png" alt="">
								<p>电费</p>
							</router-link>
							
						</li>
						<li>
							<router-link to="/selectjg">
								<img src="../assets/images/serviceimg/kuandai@3x.png" alt="">
								<p>宽带</p>
							
							</router-link>
						</li>
						<li>
							<router-link to="/life">
								<img src="../assets/images/serviceimg/more@3x.png" alt="">
								<p>更多</p>
							</router-link>
							
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="serviceItems">
			<div class="itemsContainer">
				<div class="item">
					<router-link to="/cleaning">
						<img src="../assets/images/serviceimg/baojie@3x.png" 
						alt="">
						<p>保洁</p>
					</router-link>	
				</div>
				<div class="item">
					<router-link to="/movehouse">
						<img src="../assets/images/serviceimg/banjia@3x.png" alt="">
						<p>搬家</p>
					</router-link>	
				</div>
				<div class="item">
					<router-link to="/homerepair">
						<img  class="lastImg" src="../assets/images/serviceimg/jiaxiu@3x_33.png" alt="">
						<p>家修</p>
					</router-link>	
				</div>
				<div class="des">
					<span class="c1">热门推荐</span>
					<span class="c2">为您提供最优质的服务,享受生活的每一天</span>
				</div>
				<div>
					<div class="itemTwo">
						<router-link to="/dailyclean">
							<img src="../assets/images/serviceimg/richangbaojie@3x.png" alt="">
							<p>日常保洁</p>
						</router-link>							
					</div>
					<div class="itemTwo">
						<router-link to="/removemites">
							<img src="../assets/images/serviceimg/chuman@3x.png" alt="">
							<p>除螨保洁</p>
						</router-link>	
						
					</div>
					<div class="itemTwo">
						<router-link to="/yijumove">
							<img src="../assets/images/serviceimg/banjia@3x.png" alt="">
							<p>宜居搬家</p>
						</router-link>	
						
					</div>
					<div class="itemTwo">
						<router-link to="/recharge">
							<img src="../assets/images/serviceimg/chongzhika@3x.png" alt="">
							<p>充值卡优惠</p>
						</router-link>	
						
					</div>
					<div class="zhanWei">
				
					</div>
				</div>
				
			</div>
		</div>

		<FooterNav />
		
	</div>

</template>
<script>
	import FooterNav from "../components/footernav"
	import ShopHeader from "../components/shopheader"
	export default{
		name:'server',
		data(){
			return{
				dataArr:{
					isInput:false,
					iconArr:[
						{
							iconLeft:"icon-location",
							iconRight:"icon-xiaoxi"
						}
					],
					placeholder:"生活服务",
					aimUrl:"/localize",
					rightUrl:"/wonews"
				}
			}
		},
		components:{
			FooterNav,
			ShopHeader
		}
	}
</script>
<style scoped lang="less">
	
	.home-container{
		width: 100%;
		background: #ffffff;
		overflow: hidden;
		.home-head{
			height:44/50rem;
			background:#ff5555;
			position: fixed;
			top:0;
			left: 0;
			line-height:50/50rem;
			overflow: hidden;
			z-index: 666;
			
			div{
				float: left;
			}
			.head-left{
				img{
					margin-left: 20/50rem;
					width:35/2/50rem;
					margin-top: 10/50rem;
				}
				
			}
			.head-title{
				p{
					color:#ffffff;
					text-align: center;
					width:600/2/50rem;
					font-size: 18/50rem;
					overflow: hidden;
				}
			}
			.head-right{
				img{
					margin-right: 20/50rem;
					margin-top: 10/50rem;
					width:35/2/50rem;
				}
				
			}
			width: 100%;
			background-color: #f55;

		}
		.service-img{
			width: 100%;
			margin-top: 90 / 2 / 50rem;
			img{
				width: 100%;
				height: 360 / 2 / 50rem;
			}
		}
		.pay{
			height: 230/2/50rem;
			p{
				font-size: 17/2/50rem;
				color:rgba(0,0,0,0.8);
				margin-top: 28/2/50rem;
				margin-left: 22/2/50rem;
				font-weight:bold;
				margin-bottom: 20/2/50rem;
			}
			.list{
				width:680/2/50rem;
				height:162/2/50rem;
				margin: 0 auto;
				box-shadow:0px 0px  5px 1.5px #eee;
				ul{
					li{
						float: left;
						margin-right: 80/2/50rem;
						margin-top: 44/2/50rem;
						img{
							height: 60/2/50rem;
							weight:40/2/50rem;
						}
						p{
							margin:0;
							margin-top: 20/2/50rem;
							margin-left: 10/2/50rem;
						}
					}
					.list1{
						padding-left: 100/2/50rem;
					}
				}
			}

		}
		.serviceItems{

			width:100%;
			.itemsContainer{
				width:710/2/50rem;
				height:175/2/50rem;
				margin:0 auto;
				
				div{
					float: left;
					position: relative;
				}
				img{
					width:226/2/50rem;
					height:150/2/50rem;
					display: inline-block;
					margin-right: 10/2/50rem;
				}
				p{
					position: absolute;
					width: 150/2/50rem;
					margin:0 auto;
					top:60/2/50rem;
					left:90/2/50rem;
					font-size: 28/2/50rem;
					color:#ffffff;
					font-weight:bold;
				}
				.lastImg{
					margin-right: 0;
				}
				.zhanWei{
					width: 100%;
					height: 200/100rem;
					margin-bottom: 20/100rem;
				}
				.itemTwo{
					img{
						width:335/2/50rem;
					}
				}
				.des{
					margin-top: 22/2/50rem;
					margin-bottom:  19/2/50rem;
					.c1{
						font-size: 30/2/50rem;
						color:rgba(0,0,0,.8)
					}
					.c2{
						font-size: 12/2/50rem;
						color:rgba(0,0,0,.8)
					}
				}
			}
		}
	}
	

</style>